import { Text, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'
import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { pTx } from "../../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
import IconFont from '@pingtou/rn-vant-icons'
import httpApi from "../../api"

const SetGroupJoin = (props) => {
    const [group] = useState(props.route.params)
    const realm = useRealm();
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupInfo = useQuery(schemaName.GroupInfo, Info => {
        return Info.filtered(`Id == ${group.G} and UserId == ${userInfo.Id}`);
    })[0];
    console.log(groupInfo)
    const [loading, setLoading] = useState(false)
    const [status] = useState([0, '', 0, '', '', '', '', '', 1, '', 1, '', '', '', '', '', 2, "", 2][groupInfo.Status])
    const [statusList] = useState([
        {
            label: "直接加入",
            status: 0
        },
        {
            label: "验证加入",
            status: 1
        },
        {
            label: "不允许加入",
            status: 2
        },
    ])

    const onSubmit = async (status) => {
        if (loading) return
        setLoading(true)
        try {
            const res = await httpApi.setAllowJoin({
                status,
                groupId: groupInfo.Id
            })
            if (res.code == 20) {
                realm.write(() => {
                    if ([0, 8, 16].indexOf(groupInfo.Status) !== -1) {
                        groupInfo.Status = [0, 8, 16][status]
                    } else {
                        groupInfo.Status = [2, 10, 18][status]
                    }
                })
                props.navigation.goBack()
            }

        } catch (error) {
        }
    }
    return (
        <View style={styles.page}>
            <View style={styles.row}>
                {
                    statusList.map((item, index) => {
                        return (
                            <TouchableWithoutFeedback key={index} onPress={() => onSubmit(item.status)}>
                                <View style={[styles.cell]}>
                                    <Text style={styles.label}>{item.label}</Text>
                                    <View style={[styles.radio, item.status == status && styles.current]}>
                                        {item.status == status && <IconFont name="success" color={"#fff"} size={pTx(14)} />}
                                    </View>
                                </View>
                            </TouchableWithoutFeedback>
                        )
                    })
                }
            </View>
        </View>
    )
}

const mapStateToProps = (state) => state.app

const mapDispatchToProps = {
}

export default connect(mapStateToProps, mapDispatchToProps)(SetGroupJoin)
const styles = StyleSheet.create({
    page: {
        flex: 1,
        backgroundColor: "#fff"
    },
    cell: {
        flexDirection: 'row',
        justifyContent: "space-between",
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0,0,0,0.1)"
    },
    label: {
        fontSize: pTx(14),
        color: "#333333"
    },
    radio: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
        width: pTx(24),
        height: pTx(24),
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.1)",
        borderRadius: pTx(14),
    },
    current: {
        backgroundColor: "rgba(6, 193, 97, 1)"
    }
})